<template>
	<view class="container">
		<view class="list" v-if="saleList.length>0">
			<view class="list-item" v-for="item in saleList" :key="item.id">
				<image :src="item.user.avatar" class="avatar"></image>
				<view class="info">
					<view class="details">
						<text class="quantity">出售：{{ item.number }} 钻石</text>
					</view>
					<view class="price">价格：￥{{ item.price }}</view>
					<view class="time">时间：{{ item.add_time }}</view>
				</view>
				<button class="buy-button" @click="buyDiamonds(item)">立即购买</button>
			</view>
		</view>
		<view v-else>
			<emptyPage :title='$t(`暂无数据~`)'></emptyPage>
		</view>
		<payment :payMode="payMode" :pay_close="pay_close" :is-call="true" @onChangeFun="onChangeFun"
			:order_id="pay_order_id" :totalPrice="totalPrice" @payachieve="payachieve"></payment>
		<!-- <tabBar v-if="!is_diy" :pagePath="'/pages/market/market/market'"></tabBar>
		<pageFooter v-else></pageFooter> -->
	</view>
</template>

<script>
	import tabBar from "@/pages/index/visualization/components/tabBar.vue";
	import pageFooter from '@/components/pageFooter/index.vue'
	import payment from '@/components/payment/index1';
	import emptyPage from '@/components/emptyPage.vue'
	import {
		getUserInfo,
	} from '@/api/user.js';
	import {
		userDiamondlist
	} from "@/api/api.js"
	export default {
		data() {
			return {
				saleList: [],
				payMode: [{
						name: this.$t(`微信支付`),
						icon: 'icon-weixinzhifu',
						value: 'weixin',
						title: this.$t(`微信支付`),
						payStatus: true
					},
					{
						name: this.$t(`余额支付`),
						icon: 'icon-qiandai',
						value: 'yue',
						title: this.$t(`余额支付`),
						payStatus: true,
						number: 0
					}
				],
				pay_close: false,
				totalPrice: '',
				pay_order_id: "",
				is_diy: uni.getStorageSync('is_diy'),
			};
		},
		components: {
			payment,
			emptyPage,
			tabBar,
			pageFooter,
		},
		onLoad() {
			this.getUserInfo();
		},
		onShow() {
			this.userDiamondlist();
		},
		methods: {
			payachieve(e) {
				this.pay_close = false;
				this.userDiamondlist();
			},
			userDiamondlist() {
				userDiamondlist({
					type: 1
				}).then(res => {
					this.saleList = res.data.list;
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: "error"
					})
				})
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					this.payMode[1].number = res.data.now_money;
				});
			},
			buyDiamonds(item) {
				this.pay_order_id = `${item.id}`;
				this.pay_close = true;
				this.totalPrice = item.price;
			},
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				this.pay_close = false
				action && this[action] && this[action](value);
			},
		},
		onPullDownRefresh() {
			// 编写你的刷新逻辑
			console.log('下拉刷新被触发');
			this.userDiamondlist();
		}
	};
</script>

<style>
	.container {
		padding: 20rpx;
		background: #fff;
	}

	.list-container {
		/* height: 500px; */
		/* 设置一个高度，启用滚动 */
	}

	.list-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #eee;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.info {
		flex: 1;
	}

	.details {
		margin-bottom: 10rpx;
	}

	.quantity {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
	}

	.price {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.time {
		font-size: 25rpx;
		color: #999;
	}

	.buy-button {
		background-color: rgba(29, 176, 252, 1);
		/* 蓝色主题色 */
		color: #fff;
		padding: 16rpx 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
</style>